<template>
	<view>
		<!-- 弹出框内容 -->

		<view class="popView" style="width: 100%; height: 400px;">
			<view class="popView-titleView">
				<text class="popView-titleView-text">MCC行业选择</text>
				<image class="popView-titleView-image" mode="aspectFit" src="./image/shutDown-address.png"
					@click="closeImageClick"></image>
			</view>

			<!-- 头部 -->
			<view class="headPopView">
				<view class="popView-type">
					<view v-for="(item, index) in 2" :key="index" class="popView-type-block"
						:style="{ width: tabScreenWidth + 'px' }">
						<!-- <text v-if="selectArray <= index">请选择</text> -->

						<text class="popView-type-text" :class="
                index === selectArray.length
                  ? 'popView-type-active'
                  : selectArray.length < index
                  ? 'popView-type-empty'
                  : 'popView-type-text'
              ">
							{{ index === selectArray.length ? '请选择' : selectArray[index] ? selectArray[index].name : '' }}
						</text>
					</view>
				</view>
			</view>

			<!-- 列表 -->
			<view style="display: flex; flex-direction: row; margin-top: 30upx; width: 90%; margin-left: 5%;">
				<!-- <scroll-view style="height: 280px;" :style="{ width: tabScreenWidth + 'px' }" scroll-y="true"> -->
					<!-- 列表 -->
					<!-- <view class="blockTwoClass" v-if="selectArray.length >= 0"
						:style="{ width: tabScreenWidth + 'px' }"> -->
						<!-- 列表1 -->
						<!-- <view class="blockTwoClass-block">
							<view v-for="(item, index) in myProvinceArray" :key="index" class="popView-block"
								@click="chooseProvince(item.oneCategory)">
								<text
									:class="provinceIndex == index ? 'popView-block-text-active' : 'popView-block-text'">{{ item.oneCategory }}</text>
							</view>
						</view>
					</view>
				</scroll-view> -->

				<scroll-view style="height: 280px;" :style="{ width: tabScreenWidth + 'px' }" scroll-y="true">
					<!-- 列表 -->
					<view class="blockTwoClass" v-if="selectArray.length >=0"
						:style="{ width: tabScreenWidth + 'px' }">
						<!-- 列表2 -->
						<view class="blockTwoClass-block">
							<view v-for="(item,index) in myCityArray" :key="index" class="popView-block"
								@click="chooseCity(item.twoCategory)">
								<text
									:class="cityIndex === index ? 'popView-block-text-active' : 'popView-block-text'">{{ item.twoCategory }}</text>
							</view>
						</view>
					</view>
				</scroll-view>

				<scroll-view style="height: 280px;" :style="{ width: tabScreenWidth + 'px' }" scroll-y="true">
					<!-- 列表3 -->
					<view class="blockTwoClass" v-if="selectArray.length >= 1"
						:style="{ width: tabScreenWidth + 'px' }">
						<view class="blockTwoClass-block">
							<view v-for="(item,index) in myAreaArray" :key="index" class="popView-block"
								@click="chooseArea(item.threeCategory,item.mccCode)">
								<text
									:class="areaIndex === index ? 'popView-block-text-active' : 'popView-block-text'">{{item.threeCategory}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import areaList from '../../commons/area'

	export default {
		data() {
			return {
				tabScreenWidth: uni.getSystemInfoSync().windowWidth * 0.3,

				provinceIndex: -1, //省
				myProvinceArray: [],
				oldmyCityArray: [],
				cityIndex: -1, //市
				myCityArray: [],
				chengShi: [], //存放城市
				areaIndex: -1, //区
				myAreaArray: [],
				ceShi: [],
				headtitleArray: [], //在头部显示的地址
				selectArray: [], //选择省市区的下标
				province: '',
				city: '',
				area: '',
				areaCode: '', //城市的code码,获取区的时候要用到
				final: '', //给后台的值
				XW:'',
				PT:'',
				XiaoWei: [{
						natureKey: 'MICRO_TYPE_STORE'
					},
					{
						natureKey: 'MICRO_TYPE_MOBILE'
					}
				],
				PuTong: [{
						natureKey: 'STOCK_COMPANY'
					},
					{
						natureKey: 'LIMITED_COMPANY'
					},
					{
						natureKey: 'INDIVIDUAL_BUSINESS'
					},
					{
						natureKey: 'GOVERNMENT_INSTITUTION'
					},
					{
						natureKey: 'OTHER'
					}
				]
			}
		},
		props: {
			// 选择 列表 列数 ， 1 只能选择省， 2。 只能选 省 市 ， 3。  省市县
			selectType: {
				type: Number,
				default: 3
			},
			fatherNature: {
				type: Object,
				default: {}
			}
		},
		mounted() {
			//this.requestForProvList()
			//this.getSSQ()
			this.chooseProvince()
			
			
		},
		created() {
			console.log('传的值++++', this.fatherNature)
			if(this.fatherNature.MerchantType === 'COMMON_MERC'){
				let _this = this;
				let newArr = this.PuTong.filter(el=>{
					 if(el.natureKey === _this.fatherNature.natureS){
						return  _this.PT = el.natureKey
					}
				})
				console.log('普通',this.PT)
			}
			if(this.fatherNature.MerchantType === 'MICRO_MERC'){
				let _this = this;
				let newArr = this.XiaoWei.filter(el=>{
					 if(el.natureKey === _this.fatherNature.natureS){
						return  _this.XW = el.natureKey
					}
				})
				console.log('小微',this.XW)
			}
		},
		components: {},
		methods: {
			chooseProvince(item) {
				console.log(item)
				// let _this =this
				// this.oldmyCityArray = this.chengShi.filter(el=>{
				// 	 if(key === el.value){
				// 		return el.children
				// 	}
				// })
				// console.log('对应的城市',this.oldmyCityArray)
				// for(let i = 0; i<this.oldmyCityArray.length;i++){
				// 	_this.myCityArray = this.oldmyCityArray[i].children
				// }
				// console.log('得到的城市子节点myCityArray',this.myCityArray)
				this.myAreaArray = []
				this.province = {
					name: item
				}
				if (this.selectType === 1) {
					this.commitFun()
					return
				}
				// this.requestForCityList(key)
				let arr = new Array(1)
				arr[0] = this.province
				console.log(arr)
				this.selectArray = arr


				//  let parms={
				//  	mccType: "MERC",
				//  	queryType: "TWO_TYPE",
				// oneCategory:item,
				//  }
				let Xparms = {
					mccType: "ACTIVE",
					queryType: "TWO_TYPE",
					oneCategory: item,
					microType: this.XW
				}
				let Pparms = {
					mccType: "ACTIVE",
					queryType: "TWO_TYPE",
					oneCategory: item,
					mercNature: this.PT
				}
				this.$showLoading();
				this.$request(this.$api.pubMccList, this.fatherNature.MerchantType === 'MICRO_MERC' ? Xparms : Pparms,
						'POST')
					.then(res => {
						this.$hideLoading();
						if (res.code === 200) {
							this.myCityArray = res.data
						}


					})








			},
			chooseCity(item) {


				console.log(item)
				this.myAreaArray = []
				this.city = {
					name: item
				}
				if (this.selectType === 2) {
					this.commitFun()
					return
				}
				//this.requestForAreaList(key)
				let arr = new Array(2)
				arr[0] = this.province
				arr[1] = this.city

				console.log(arr)
				this.selectArray = arr
				//  let parms={
				//  	mccType: "MERC",
				//  	queryType: "THREE_TYPE",
				// twoCategory:item,
				// oneCategory:this.province.name
				//  }
				let Xparms = {
					mccType: "ACTIVE",
					queryType: "THREE_TYPE",
					twoCategory: item,
					oneCategory: this.province.name,
					microType: this.XW
				}
				let Pparms = {
					mccType: "ACTIVE",
					queryType: "THREE_TYPE",
					twoCategory: item,
					oneCategory: this.province.name,
					mercNature: this.PT
				}
				this.$showLoading();
				this.$request(this.$api.pubMccList, this.fatherNature.MerchantType === 'MICRO_MERC' ? Xparms : Pparms,
						'POST')
					.then(res => {
						this.$hideLoading();
						if (res.code === 200) {
							this.myAreaArray = res.data
						}

					})
			},
			chooseArea(item, code) {

				console.log(item)
				let arr = new Array(3)
				this.area = {
					name: item,
					key: code
				}
				arr[0] = this.province
				arr[1] = this.city
				arr[2] = this.area

				console.log(arr)
				this.selectArray = arr

				this.commitFun()
			},

			commitFun() {
				//数据传输 结束
				let navData = {
					province: this.province,
					city: this.city,
					area: this.area
				}
				this.$emit('commitClick', navData)
			},

			closeImageClick() {
				this.$emit('closeImageClick', 'close')
			},

			requestForProvList() {
				const {
					area: {
						province_list
					} = {}
				} = areaList.data()
				this.myProvinceArray = province_list
			},
			//一级类目
			getSSQ() {
				console.log('普通普通普通',this.PT)
				console.log('小微小微小微',this.PT)
				let _this = this

				let Xparms = {
					mccType: "ACTIVE",
					queryType: "ONE_TYPE",
					microType: this.XW
				}
				let Pparms = {
					mccType: "ACTIVE",
					queryType: "ONE_TYPE",
					mercNature: this.PT
				}
				this.$showLoading();
				this.$request(this.$api.pubMccList, this.fatherNature.MerchantType === 'MICRO_MERC' ? Xparms : Pparms,
						'POST')
					.then(res => {
						this.$hideLoading();
						if (res.code === 200) {
							this.chengShi = res.data
							// console.log('存放的城市',this.chengShi)
							//   for(let i = 0; i<res.data.length;i++){
							// 			   _this.myProvinceArray.push({
							// 				   label:res.data[i].label,
							// 				   value:res.data[i].value,
							// 			   })
							//   }
							//   console.log('啦啦',this.myProvinceArray)
							// console.log('每一个省++++++++++++++',this.ceShi)
							this.myProvinceArray = res.data
						}


					})
			},
			requestForCityList(key) {
				// 截取 省的前两位
				const prefix = key.slice(0, 2)
				const {
					area: {
						city_list
					} = {}
				} = areaList.data()
				const city = {}
				Object.keys(city_list).forEach(i => {
					const city_pre = i.slice(0, 2)
					if (prefix === city_pre) {
						city[i] = city_list[i]
					}
				})
				this.myCityArray = city
			},
			requestForAreaList(key) {
				// 截取 市的前四位
				console.log('市的前四位', key)
				const prefix = key.slice(0, 4)
				const {
					area: {
						county_list
					} = {}
				} = areaList.data()
				const city = {}
				Object.keys(county_list).forEach(i => {
					const city_pre = i.slice(0, 4)
					if (prefix === city_pre) {
						city[i] = county_list[i]
					}
				})
				console.log('市', city)

				this.myAreaArray = city
			}
		}
	}
</script>

<style lang="less">
	.blockTwoClass {
		display: flex;
		flex-direction: column;
		// justify-content: center;

		// position: fixed;
		// overflow-y: scroll; //position状态竖向滑动
		// overflow-x: hidden; //position状态不可横向滑动

		.blockTwoClass-block {
			display: flex;
			flex-direction: column;
			justify-content: center;

			.popView-block {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				//height: 80upx;

				.popView-block-text {
					// font-weight: bold;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 28upx;
					color: #333333;
					//height: 80upx;
					width: 100%;
					margin-bottom: 40upx;
				}

				.popView-block-text-active {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					font-weight: bold;
					font-size: 28upx;
					color: #4488ff;
					height: 80upx;
					width: 100%;
				}
			}
		}
	}

	.popView {
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		width: 100%;

		// position: fixed;
		// overflow-y: scroll; //position状态竖向滑动
		// overflow-x: hidden; //position状态不可横向滑动
		// top: 0;
		// left: 0;
		// width: 100%;
		// height: 90%;
		// opacity: 1;
		// z-index: 99;
		// background-color: #FFFFFF;

		.popView-titleView {
			display: flex;
			flex-direction: row;
			font-weight: bold;
			height: 120upx;

			.popView-titleView-text {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				font-size: 32upx;
				color: #FF9500;
			}

			.popView-titleView-image {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 40upx;
				width: 40upx;
				height: 100%;
			}
		}

		.headPopView {
			display: flex;
			align-items: center;
			width: 100%;
			height: 80upx;
			background-color: #f5f5f5;

			.popView-type {
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 90%;
				margin-left: 5%;
				height: 40px;

				.popView-type-block {
					display: flex;
					align-items: center;

					.popView-type-text {
						font-size: 28upx;
						color: #666666;
					}

					.popView-type-active {
						font-size: 28upx;
						color: #FF9500;
					}

					.popView-type-empty {
						margin-left: 80upx;
						font-size: 28upx;
						color: #4488ff;
						padding: 0upx 0upx 0upx 0upx;
					}
				}
			}
		}
	}
</style>
